<template>
    <div>
        <mu-tabs :value="$route.path" full-width color="teal">
            <mu-tab value="/home" to="/home">
                <mu-icon value="home" />首页
            </mu-tab>
            <mu-tab value="/invest" to="/invest">
                <mu-icon value="local_atm" />投资理财
            </mu-tab>
            <mu-tab value="/trade" to="/trade">
                <mu-icon value="favorite" />预约产品
            </mu-tab>
            <mu-tab value="/person" to="/person">
                <mu-icon value="person_pin" />我的
            </mu-tab>
        </mu-tabs>
    </div>
</template>

<style lang="scss">
    .mu-tabs {
        max-width: 540px;
	    margin: 0 auto;
        position: fixed;
        bottom: 0;
        .mu-tab-wrapper {
            padding: 6px;
        }
        .mu-icon {
            margin-bottom: 0;
        }
        span {
            width: calc(100% / 4) !important;
        }
    }
</style>